<script>

import requestUtil from "@/utils/RequestUtil";

export default {
  name: "BrandDetail",
  data() {
    return {
      data: {
        name: '',
        imgUrl: 'http://macro-oss.oss-cn-shenzhen.aliyuncs.com/mall/images/20221108/xiaomi_banner_01.png',
        introduce: '',
        icon: '',
        product: []
      }
    }
  },
  methods: {
    async init() {
      let storeInfo = await requestUtil.get('/getStoreById', {params: {id: this.$route.query.id}})
      storeInfo = storeInfo.data.data
      this.data.icon = storeInfo.img
      this.data.name = storeInfo.storeName
      this.data.introduce = storeInfo.introduce
      let productInfo = await requestUtil.get('/getProductByStoreId', {params: {id: storeInfo.storeId}})
      productInfo = productInfo.data.data
      this.data.product = productInfo
    }
  },
  mounted() {
    this.init()
  }
}
</script>

<template>
  <div>
    <img :src="data.imgUrl" alt="banner" style="width: 100%;border-radius: 10px;object-fit: contain;">
    <div
        style="padding: 15px 25px;display: flex;justify-content: space-between;align-items: center;background-color: white;margin-bottom: 5px">
      <div style="display: flex;justify-content: center;align-items: center">
        <img :src="data.icon" alt="icon" style="height: 35px;object-fit: contain">
        <div style="display: flex;flex-direction: column">
          <span style="font-size: 18px">
          {{ data.name }}
        </span>
          <span style="color: #909399;font-size: 12px;margin-top: 4px">品牌首字母：M</span>
        </div>
      </div>
      <van-icon name="like" size="32"/>
    </div>
    <div style="padding: 8px 15px;background-color: white;justify-content: center;margin-bottom: 5px">
      <p style="text-align: center;">品牌故事</p>
      <p
          style="font-size: 12px;color: #909399;margin-top: 10px">
        {{ data.introduce }}</p>
    </div>
    <div style="background-color: white">
      <p style="text-align: center;padding-top: 10px">相关商品</p>
      <div style="display: flex;width: 100%;flex-wrap: wrap">
        <div v-for="item in data.product" :key="item.productName" style="width: 50%;padding: 0 5px"
             @click="$router.push({name: 'productDetail', query:{product_id: item.productId}})">
          <img :alt="item.productName" :src="item.productCarousel" style="width: 100%">
          <p style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-size: 16px;color: #303133;line-height: 40px;">
            {{ item.productName }}</p>
          <span
              style="-webkit-line-clamp: 2;overflow: hidden;display: -webkit-box;text-overflow: ellipsis;-webkit-box-orient: vertical;line-height: 20px;height: 40px;font-size: 12px;color: #909399">
            {{
              item.productIntroduce
            }}</span>
          <div style="display: flex;justify-content: space-between">
            <span style="font-size: 16px;color: #fa436a;"> ￥{{ item.productPrice }}</span>
            <span style="font-size: 12px;color: #909399;margin-right: 5px">库存 {{ item.productNum }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>

</style>